{% extends "layout.html" %}
{% block body %}
    

       <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <style type="text/css">
            html { height: 100% }

            #map_canvas { height: 100%; margin: 0 auto }
        </style>
        
        <script type="text/javascript"
            src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBwFYxG1PRMNw1j6j74wUF2ya2eFaBsX14&sensor=true">
        </script>
        
        <script type="text/javascript">
            var directionsDisplay;
            var directionsService = new google.maps.DirectionsService();
            var map;
            var stepDisplay;
            var markerArray = [];

        
            function success(position) {
   
                //location checker
            	var s = document.querySelector('#status');
                if (s.className == 'success') {
                    // if "allow" for gps has already been set
                    return;
                }
                s.innerHTML = "found you!";
                s.className = 'success';
                
                //setup map
                var mapcanvas = document.createElement('div');
                mapcanvas.id = 'mapcanvas';
                mapcanvas.style.height = '400px';
                mapcanvas.style.width = '560px';
                document.querySelector('statusChecker').appendChild(mapcanvas);
                
                //options and initialization for map
                  //marker for user position
                var position = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);          
                var myOptions = {
                    zoom: 8,
                    center: position,
                    mapTypeControl: false,
                    scaleControl: true,
                    navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
             map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
          
             
             calcRoute(position);
             setupDirections();
            /* 
             
                 var marker = new google.maps.Marker({
                     position: position,
                     map: map,
                     title:"You are here!"
                 });
              */

                              
 /*          
               //add location markers to map
               //initialize location list
               var image = 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=bus|0EF010';
               //var locs = ({{ locations|safe }});
               var links = "{{urls}}";
               var url_arr = links.split(',');
               var mark, i;

               //add markers to map
               for(i=0; i<locs.length; i++){
   
                   mark = new google.maps.Marker({
                       position:  new google.maps.LatLng(locs[i][3], locs[i][4]),
                       map: map,
                       icon: image,
                       title: locs[i][2]
                   });
                   
                   google.maps.event.addListener(mark, 'click', (function(url_arr, i) {
                       return function() {
                           window.location = url_arr[i]; 
                       }
                   })(url_arr, i));
               } 
*/
            	  
            }
            
            function error(msg) {
                var s = document.querySelector('#status');
                s.innerHTML = typeof msg == 'string' ? msg : "failed";
                s.className = 'fail';

                // console.log(arguments);
            }

            function Findlocation(){
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(success, error);
                } else {
                    error('not supported');
                }
            }
            
           function showSteps(directionResult) {
              // For each step, place a marker, and add the text to the marker's
              // info window. Also attach the marker to an array so we
              // can keep track of it and remove it when calculating new
              // routes.
              var myRoute = directionResult.routes[0].legs[0];

              for (var i = 0; i < myRoute.steps.length; i++) {
                  var marker = new google.maps.Marker({
                    position: myRoute.steps[i].start_point,
                    map: map
                  });
                  attachInstructionText(marker, myRoute.steps[i].instructions);
                  markerArray[i] = marker;
              } 
            } 

            function attachInstructionText(marker, text) {
              google.maps.event.addListener(marker, 'click', function() {
                stepDisplay.setContent(text);
                stepDisplay.open(map, marker);
              });
            }
            
            function calcRoute(start){
                 var request =  {
                      origin: start,
                      destination: "Grand Canyon National Park, AZ",
                      provideRouteAlternatives: false,
                      travelMode: google.maps.TravelMode.WALKING,
                      unitSystem: google.maps.UnitSystem.METRIC
                 };
                 directionsService.route(request, function(response, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                      var warnings = document.getElementById("warnings_panel");
                    //  warnings.innerHTML = "" + response.routes[0].warnings + "";
                      directionsDisplay.setDirections(response);
                      showSteps(response);
                    }
                });
                
                
            }
            
            function setupDirections(){
            // Create a renderer for directions and bind it to the map.
                  var rendererOptions = {
                    map: map
                  };
                directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); 
            	
                // Instantiate an info window to hold step text.
                stepDisplay = new google.maps.InfoWindow();
                   directionsDisplay.setMap(map);
            }
        </script> 
        
        
        <script type="text/javascript">
            Findlocation();
        </script>
   
       <div class="page-header">
            <h1> How to walk to the Grand Canyon <small> from your current location </small> </h1>
        </div>
        <div class="row">
            <div class="span10">
                <statusChecker><p>Finding your location: <span id="status">checking...</span> </p></statusChecker>
            <div id="map_canvas" style="width:100%; height:100%"></div>
            <div id="directionsPanel" style="float:right;width:30%;height 100%"></div>
{% endblock %}
